<template>
    <uni-popup ref="popupRef" :type="type" border-radius="10px 10px 0 0">
        <view class="popup-box" :style="popupStyle">
            <view class="header-box">
                <view></view>
                <view class="title">{{title}}</view>
                <view class="right-box">
                    <up-icon v-if="showCloseIcon" name="close" color="#303133" size="24" @tap="close"></up-icon>
                </view>
            </view>
            <view class="content-box" :style="contentStyle">
                <slot/>
            </view>
            <view class="footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'bottom'
    },
    width: {
        type: String,
        default: '100%'
    },
    borderRadius:{
        type: String,
        default: '0'
    },
    height:{
        type: String,
        default: '20vh'
    },
    showCloseIcon: {
        type: Boolean,
        default: true
    }
})

const popupRef = ref()
const open = () => {
    popupRef.value.open()
}
const close = () => {
    popupRef.value.close()
}

const popupStyle=computed(()=>{
    return {
        borderRadius: props.borderRadius,
        width: props.width
    }
})
const contentStyle=computed(()=>{
    return {
        height: props.height,
    }
})
defineExpose({
    open,
    close
})
</script>
<style scoped lang="scss">
.popup-box {
    display: flex;
    flex-direction: column;
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    .header-box{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 24rpx 48rpx;
        box-sizing: border-box;
        .title{
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
        }
        .right-box{
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
    .content-box {
        flex: 1;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .footer {
        padding: 0 32rpx;
        box-sizing: border-box;
    }
}
</style>
